<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul,li {
            list-style-type: none;
            padding: 0;
        }
        body {
            background-color: pink;
        }
        .wrapper {
            width: 1200px;
            margin: 0 auto;
        }
        .logo-box {
            width: 500px;
            height: 500px;
            background: url(images/duo-logo.svg) 0 0;
            background-size:100% 100%;
            margin: 80px auto;
            border-radius: 25%;
            cursor: pointer;
            transition: box-shadow .2s linear;
            transform: rotateX(2700deg);
            animation: rootate 10s linear infinite;
        }
        .logo-box:hover {
            box-shadow: -1px 6px 18px -7px black;
        }
        .tit-big {
            font-weight: 700;
            text-align: center;
            font-size: 38px;
            color: white;
            text-shadow: 8px 5px 10px rgb(0,0,0);
        }
        @keyframes rootate {
            0% {
                transform: rotateZ(0deg);
            }
            50% {
                transform: rotateZ(180deg);
            }
            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>
    <div id="duo">
        <!-- 注释在被编译完成后会被丢弃 -->
        <div class="wrapper">
            <div class="logo-box" title="铎哥恒久远,一框永流传!">
            </div>
            <h1 class="tit-big">[[welcomeStr]]</h1>  
            <span>肌肉无的[[name1]]向[[name2]]表白了</span><button $click="reject">点击拒绝</button> 
        </div>
    </div>
    <script src="js/duo.js"></script>
    <script>
        /* 
        
        ---铎哥框架 YYDS

        已完成功能:

        1.插值语法 eg : [[name]] 在data里面的数据被写在这里

        2.事件绑定 eg : $事件名  在fs里面写的方法会被执行
        
        */
        const duo = {
            data:{
              welcomeStr:'欢迎使用Duo.js!',
              name1:'frank',
              name2:'迪丽热巴',
            },
            fs:{
                reject(){
                    alert(this.data.name2+'拒绝了'+this.data.name1+'的表白!')
                }
            }
        }
        const d = createDuo(duo).renderDOM('#duo');
    </script>
</body>
</html>